<template>
  <div ref="orderPresentation" class="orderPresentation"></div>
</template>

<script>
  export default {
    name: 'orderPresentation',
    components: {

    },
    data() {
      return {

      }
    },
    mounted() {
      var that = this;
      this.getEchartData();
      setInterval(function() {
        that.getEchartData()
      }, 10000)

    },
    methods: {
      // 千分位
      formatNumberRgx(num) {
        var parts = num.toString().split(".");
        parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        return parts.join(".");
      },
      // 获取当前日期
      formatDate(Y, M, D) {
        let date = new Date();
        let year = date.getFullYear(); // 年
        let month = date.getMonth() + 1; // 月

        month = month < 10 ? "0" + month : month; // 如果只有一位，则前面补零
        let day = date.getDate(); // 日
        day = day < 10 ? "0" + day : day; // 如果只有一位，则前面补零
        // return `${year}${month}${day}`;
        var datastr = '';
        if (arguments.length == 1) {
          datastr = year;
        } else if (arguments.length == 2) {
          datastr = year + "-" + month;
        } else if (arguments.length == 3) {
          datastr = year + "-" + month + "-" + day;
        }
        return datastr;
      },
      // 当前日期的下个月
      getNextMonth(Y, M, D) {
        let date = this.formatDate(Y, M, D);
        var arr = date.split('-');
        var year = arr[0]; //获取当前日期的年份
        var month = arr[1]; //获取当前日期的月份
        var day = arr[2]; //获取当前日期的日
        var days = new Date(year, month, 0);
        days = days.getDate(); //获取当前日期中的月的天数
        var year2 = year;
        var month2 = parseInt(month) + 1;
        if (month2 == 13) {
          year2 = parseInt(year2) + 1;
          month2 = 1;
        }
        var day2 = day;
        var days2 = new Date(year2, month2, 0);
        days2 = days2.getDate();
        if (day2 > days2) {
          day2 = days2;
        }
        if (month2 < 10) {
          month2 = '0' + month2;
        }
        var datastr = '';
        if (arguments.length == 1) {
          datastr = year2;
        } else if (arguments.length == 2) {
          datastr = year2 + "-" + month2;
        } else if (arguments.length == 3) {
          datastr = year2 + "-" + month2 + "-" + day2;
        }
        return datastr;

      },
      // 获取当前日期的前一年的年月日
      getLastYearYestdy(Y, M, D) {
        let date = new Date();
        var strYear = date.getFullYear() - 1;
        var strMonth = date.getMonth() + 1;
        var strDay = date.getDate();

        if (strMonth < 10) {
          strMonth = "0" + strMonth;
        }
        if (strDay < 10) {
          strDay = "0" + strDay;
        }
        var datastr = '';
        if (arguments.length == 1) {
          datastr = strYear;
        } else if (arguments.length == 2) {
          datastr = strYear + "-" + strMonth;
        } else if (arguments.length == 3) {
          datastr = strYear + "-" + strMonth + "-" + strDay;
        }
        return datastr;
      },
      getEchartData() {
        const orderPresentation = this.$refs.orderPresentation;
        if (orderPresentation) {
          const myChart = this.$echarts.init(orderPresentation)
          var that = this;
          var startDate = that.getLastYearYestdy('Y', 'M');
          var endDate = that.getNextMonth('Y', 'M');

          // console.log(startDate,endDate)
          // getOrderMonitorInfo params: {year: year}
          that.$myHttp.get("getBusinessTrendsInfo", {
              params: {
                dtype: 'M',
                start: '2020-04',
                end: '2021-01'
              }
            })
            .then(function(data0) {
              if (data0.status == "200") {
                //console.log(data0.data.result.hn_business_trends)
                var time = [];
                var xiaDan = [];
                // var fangXing = [];
                data0.data.result.hn_business_trends.forEach((item, index) => {
                  time.push(item.REPORTDATE);
                  // xiaDan.push(that.formatNumberRgx(item.XIADAN));
                  // fangXing.push(that.formatNumberRgx(item.FANGXING));
                  if (index % 2 == 0) {
                    xiaDan.push({
                      value: (parseInt(item.AMOUNT) )
                    });
                  } else {
                    xiaDan.push({
                      value: (parseInt(item.AMOUNT)),
                      label: {
                        show: false,
                        // offset: [-that.commonFunction.fontSize(0.1), that.commonFunction.fontSize(0.15)],
                      },
                    });
                  }
                  // xiaDan.push({
                  //   value: (item.AMOUNT)
                  // });

                  // fangXing.push(item.FANGXING);
                })
                const option = {
                  title: {
                    text: '2020年航空运输跨境贸易业务量月度走势',
                    left: 'center',
                    textStyle: {
                      color: "#fff",
                      fontWeight: "normal",
                      fontSize: that.commonFunction.fontSize(0.16),
                      lineHeight: that.commonFunction.fontSize(0.3),
                    }
                  },
                  tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                      type: 'cross',
                      label: {
                        backgroundColor: '#6a7985'
                      }
                    }
                  },
                  legend: {
                    data: ['单量'],
                    orient: 'horizontal', // 'vertical'
                    x: 'center', // 'center' | 'left' | {number},
                    y: that.commonFunction.fontSize(0.4), // 'center' | 'bottom' | {number}
                    padding: that.commonFunction.fontSize(0.02), // [5, 10, 15, 20]
                    itemGap: that.commonFunction.fontSize(0.02),
                    textStyle: { //图例文字的样式
                      color: '#fff',
                      fontSize: that.commonFunction.fontSize(0.1)
                    }
                  },
                  grid: {
                    left: '2%',
                    right: '5%',
                    bottom: '1%',
                    containLabel: true
                  },
                  xAxis: [{
                    // name: '出口\n单量',
                    nameTextStyle: {
                      color: '#c3dbff',
                      fontSize: that.commonFunction.fontSize(0.1),
                      lineHeight:that.commonFunction.fontSize(0.16),
                    },
                    type: 'category',
                    boundaryGap: true,
                    // boundaryGap: false,
                    // boundaryGap: ['20%', '20%'],
                    data: time,
                    axisLabel: {
                      show: true,
                      // rotate: '10',
                      textStyle: {
                        color: '#c3dbff', //更改坐标轴文字颜色
                        fontSize: that.commonFunction.fontSize(0.1) //更改坐标轴文字大小
                      }
                    },
                    axisTick:{       //y轴刻度线
                             show:true,
                             interval:0
                           },
                    splitLine: { //网格线
                      show: true,
                      lineStyle: {
                        color: ['#152f61'],

                      }
                    },
                    axisLine: {
                      lineStyle: {
                        color: '#315070' //更改坐标轴颜色
                      }
                    }
                  }],
                  yAxis: [{
                    name: '单位：万元',
                    nameLocation: 'end',
                    type: 'value',
                    nameTextStyle: {
                      color: '#c3dbff',
                      lineHeight: that.commonFunction.fontSize(0.1),
                      fontSize: that.commonFunction.fontSize(0.1),
                       verticalAlign:'bottom'
                    },
                    axisLabel: {
                      show: true,
                      position: [that.commonFunction.fontSize(0.3), -that.commonFunction.fontSize(0.4)],
                      textStyle: {
                        color: '#c3dbff', //更改坐标轴文字颜色
                        fontSize: that.commonFunction.fontSize(0.10), //更改坐标轴文字大小


                      }
                    },

                    splitLine: { //网格线
                      show: true,
                     lineStyle: {
                       color: ['#aaa', '#ddd'],
                       opacity: 0.3,
                       type:'dotted'
                     }
                    },
                    axisLine: {
                      lineStyle: {
                        color: '#315070' //更改坐标轴颜色
                      }
                    }
                  }],
                  series: [{
                      name: '下单量',
                      type: 'line',
                      smooth: true,
                      symbol: 'circle',
                      symbolSize: that.commonFunction.fontSize(0.05),
                      sampling: 'average',
                      itemStyle: {

                        normal: {
                          color: '#ff8c33',
                          label: {
                            show: true, //开启显示
                            position: "center", //在上方显示
                            offset: [-that.commonFunction.fontSize(0.2), -that.commonFunction.fontSize(0.2)],
                            textStyle: { //数值样式
                              color: '#3cd4d6',
                              fontSize: that.commonFunction.fontSize(0.12),

                            },
                            // rotate: '30',
                            formatter: function(params) {
                              // console.log(params)
                              if (params.value) {
                                return that.formatNumberRgx(params.value)
                              } else {
                                return '';
                              }
                            },
                          },

                        }
                      },
                      areaStyle: {
                        normal: {
                          //前四个参数代表位置 左下右上，如下表示从上往下渐变色 紫色到暗蓝色，
                          color: new that.$echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [{
                                offset: 0,
                                color: 'rgba(210, 35, 231, 1)'
                              },
                              {
                                offset: 1,
                                color: 'rgba(76, 143, 243, 0)'
                              }
                            ]
                          )
                        }
                      },

                      // stack: '总量',
                      // areaStyle: {
                      //   color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                      //     offset: 0,
                      //     color: '#41ddeb'
                      //   }, {
                      //     offset: 1,
                      //     color: 'transparent'
                      //   }])
                      // },
                      data: xiaDan
                    },
                    // {
                    //   name: '放行量',
                    //   type: 'line',
                    //   smooth: true,
                    //   symbol: 'circle',
                    //   symbolSize: that.commonFunction.fontSize(0.05),
                    //   sampling: 'average',
                    //   itemStyle: {

                    //     normal: {
                    //       color: '#ff8c33',
                    //       label: {
                    //         show: true, //开启显示
                    //         position: [-that.commonFunction.fontSize(0.05), that.commonFunction.fontSize(0.1)], //在上方显示
                    //         textStyle: { //数值样式
                    //           color: '#ff8c33',
                    //           fontSize: that.commonFunction.fontSize(0.12)
                    //         },
                    //         formatter: function(params) {
                    //           // console.log(params)
                    //           if (params.value) {
                    //             return that.formatNumberRgx(params.value)
                    //           } else {
                    //             return '';
                    //           }
                    //         },
                    //       },

                    //     }
                    //   },
                    //   // stack: '总量',
                    //   // areaStyle: { //区域渐变
                    //   //   color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    //   //     offset: 0,
                    //   //     color: '#0094ff'
                    //   //   }, {
                    //   //     offset: 1,
                    //   //     color: 'transparent'
                    //   //   }])
                    //   // },
                    //   data: fangXing
                    // },

                  ]
                };


                myChart.setOption(option);
                window.addEventListener("resize", function() {
                  myChart.resize()
                })

              } else {
                alert("数据请求错误")
              }

            })
            .catch(function(error) {
              alert(error)
            })

        }
      },
      // this.$on('hook:destroyed', () => {
      //   window.removeEventListener("resize", function() {
      //     myChart.resize();
      //   });
      // })

    }
  }
</script>

<style>
  .orderPresentation {
    width: 100%;
    height: 100%;
  }
</style>
